@use '../../../variables';

$block: '.#{variables.$ns}list-item-view';

#{$block} {
    flex-shrink: 0;
    display: flex;
    flex-grow: 1;
    align-items: center;

    &__content {
        width: 100%;
        height: 100%;
    }

    &__main-content {
        width: 100%;
        display: grid;
        gap: var(--g-spacing-half, 2px);
    }

    &:hover#{$block}_activeOnHover,
    &_active {
        background: var(--g-color-base-simple-hover);
    }

    &_clickable {
        cursor: pointer;
    }

    &_selected,
    &_selected#{$block}_active, // if active and selected selected bgc more priority
    &_selected:hover#{$block}_activeOnHover {
        background: var(--g-color-base-selection);
    }

    &_dragging,
    &_dragging#{$block}_selected,
    &_dragging#{$block}_active {
        background: var(--g-color-base-simple-hover-solid);
        // more than `Sheet` z-index (100000) if `ListItemView` used in this component
        /* stylelint-disable-next-line declaration-no-important */
        z-index: 100001 !important;
    }

    &_radius_s {
        border-radius: var(--g-list-item-border-radius, 3px);
    }
    &_radius_m {
        border-radius: var(--g-list-item-border-radius, 5px);
    }
    &_radius_l {
        border-radius: var(--g-list-item-border-radius, 6px);
    }
    &_radius_xl {
        border-radius: var(--g-list-item-border-radius, 8px);
    }

    &__slot {
        flex-shrink: 0;
    }
}
